<template>
    <div class="easyd-weixin-Box">
        <div class="serviceDetailimageBox">
            <div class="serviceDetailimageContent">
                <img src="static/images/fuwuka1.png" />
            </div>
        </div>
        <div class="serviceDetailTitle">
            美年大健康（Health 100）体检卡 感恩深度体检套餐 全国门店通用
        </div>
        <div class="serviceDetailDesc">
            商品描述：面向所有注意健康的人，主要针对肝病、肾病、高血脂、等慢性病及常见肿瘤进行基础筛查，关爱家人从健康开始。 在健康筛查的基础上针对血脂、肝功能、肿瘤标记物等检查项目进行了细化，特别关注高血脂、心脑血管病、肝病等慢性病及常见肿瘤的筛查。
        </div>
        <div class="serviceDetailPriceAndCount">
            <div class="shopDetailPrice">¥99.9&nbsp;<span>¥1080</span></div>
            <div class="serviceDetailCount">浏览数：99次</div>
        </div>
        <div class="serviceDetailConcernBox">
            <div class="serviceDetailConcern">关注服务卡</div>
        </div>
        <div class="serviceDetailContent">
            <div class="serviceDetailContentTitle">服务卡详情</div>

            <template v-for="item in testData">
                <template v-if="item.type == 0">
                    <div class="serviceDetailContentItem serviceDetailContentText">
                        {{item.content}}
                    </div>
                </template>
                <template v-if="item.type == 1">
                    <div class="serviceDetailContentItem serviceDetailContentImage">
                        <img :src="item.content" v-lazy="item.content">
                    </div>
                </template>
            </template>
            <!-- <div class="serviceDetailContentItem serviceDetailContentText">
                我是描述信息我是描述信息我是描述信息我是描述信息我
                是描述信息我是描述信息我是描述信息我是描述信息我是描述
                信息我是描述信息我是描述信息
            </div>
            <div class="serviceDetailContentItem serviceDetailContentText">
                我是描述信息我是描述信息我是描述信息我是描述信息我
                是描述信息我是描述信息我是描述信息我是描述信息我是描述
                信息我是描述信息我是描述信息
            </div>
            <div class="serviceDetailContentItem serviceDetailContentImage">
                <img src="~BUSSINESS_IMAGE/images/IMG_2913.jpg" />
            </div>
            <div class="serviceDetailContentItem serviceDetailContentImage">
                <img src="~BUSSINESS_IMAGE/images/hengtu.png" />
            </div>
            <div class="serviceDetailContentItem serviceDetailContentText">
                我是描述信息我是描述信息我是描述信息我是描述信息我
                是描述信息我是描述信息我是描述信息我是描述信息我是描述
                信息我是描述信息我是描述信息
            </div>
            <div class="serviceDetailContentItem serviceDetailContentText">
                我是描述信息我是描述信息我是描述信息我是描述信息我
                是描述信息我是描述信息我是描述信息我是描述信息我是描述
                信息我是描述信息我是描述信息
            </div>
            <div class="serviceDetailContentItem serviceDetailContentText">
                我是描述信息我是描述信息我是描述信息我是描述信息我
                是描述信息我是描述信息我是描述信息我是描述信息我是描述
                信息我是描述信息我是描述信息
            </div>
            <div class="serviceDetailContentItem serviceDetailContentImage">
                <img src="~BUSSINESS_IMAGE/images/hengtu.png" />
            </div> -->
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            imageDemoUrl : "",
            testData : [
                {
                    type : 1,
                    content : './static/images/fuwukaxiangqing1.jpg'
                },
                {
                    type : 1,
                    content : './static/images/fuwukaxiangqing2.jpg'
                },
                {
                    type : 1,
                    content : './static/images/fuwukaxiangqing3.jpg'
                },
                {
                    type : 1,
                    content : './static/images/fuwukaxiangqing4.png'
                },
                {
                    type : 1,
                    content : './static/images/fuwukaxiangqing5.png'
                },
                {
                    type : 1,
                    content : './static/images/fuwukaxiangqing6.png'
                },
                {
                    type : 1,
                    content : './static/images/fuwukaxiangqing7.jpg'
                }
            ]
        }
    }
}
</script>

<style lang="stylus" scoped>
.serviceDetailimageBox {
    width 100%
    height 225px
    padding-left 15px
    padding-right 15px
    box-sizing border-box
    margin-top 15px

    .serviceDetailimageContent {
        width 100%
        height 100%
        background #fff
        border-radius 5px
        box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.05);

        img {
            width 100%
            height 100%
            border-radius 5px
            object-fit convert
        }
    }
}

.serviceDetailTitle {
    width 100%
    height auto
    padding-left 15px
    padding-right 15px
    box-sizing border-box
    text-align justify
    padding-top 10px
    font-weight 500
    padding-bottom 10px
}

.serviceDetailDesc{
    width 100%
    height auto
    line-height 22px
    font-size 12px
    padding-left 15px
    padding-right 15px
    box-sizing border-box
    text-align justify
    padding-bottom 10px    
}

.serviceDetailPriceAndCount {
    width 100%
    height 20px
    padding-left 15px
    padding-right 15px
    box-sizing border-box 
    line-height 20px

    .shopDetailPrice {
        float left    
        font-weight 500
        letter-spacing 1px
        color orange
        font-size 18px

        span {
            font-size 12px
            text-decoration line-through
            float right
            color #999
            margin-top 2px
            margin-left 5px
        }
    }

    .serviceDetailPrice {
        float left    
        font-weight 500
        letter-spacing 1px
        color orange
        font-size 16px
    }

    .serviceDetailCount {
        float right  
        color #999  
    }
}

.serviceDetailConcernBox {
    padding-left 15px
    padding-right 15px
    margin-top 10px
    border-bottom 1px solid #eee
    padding-bottom 30px
    box-sizing border-box 

    .serviceDetailConcern {
        width: 100%;
        height: 45px;
        background: #FDDE6E;
        line-height: 45px;
        text-align: center;
        margin-top: 5px;
        color: #666;
        box-sizing border-box 
        font-weight: 500;
        letter-spacing: 1px;
        border-radius: 5px;
    }
}

.serviceDetailContent {
    width 100%
    height auto
    background #fff  
    font-size 12px
    padding 15px
    box-sizing border-box 

    .serviceDetailContentTitle {
        width 100%
        height 50px;
        line-height 50px
        font-size 16px
        font-weight 500
        text-align center
        margin-bottom 10px
    }

    .serviceDetailContentItem {
        
    }

    .serviceDetailContentText {
        width 100%
        line-height 22px
        height auto    
    }
    
    .serviceDetailContentImage {
        width 100%
        height auto 

        img {
            width 100%
            height auto
            margin-top -3px
        }   
    }
}


</style>

